<template>
  <div class="banner" :style="intStyle">
    <div class="box" @mouseenter="showBtn = true" @mouseleave="showBtn = false">
      <ul>
        <li v-for="(item, index) in list" :key="index" :class="index === current ? 'active' : ''" @click="bannerClick(index, item)">
          <img class="banner-item-img" :src="item.url" alt="">
        </li>
      </ul>
      <div class="status">
        <span v-for="(item, index) in list"
              :key="index"
              :class="index === current ? 'active' : ''"
              @mouseenter="changeBanner(index)"
              @mouseleave="startLoop"
        >{{index + 1}}
        </span>
      </div>
      <transition name="fade">
        <div class="btn" v-show="showBtn">
          <span class="prev" @click="prev" @mouseenter="stopLoop" @mouseleave="startLoop">&lt;</span>
          <span class="next" @click="next" @mouseenter="stopLoop" @mouseleave="startLoop">&gt;</span>
        </div>
      </transition>
    </div>
    <!--h1 @click="getArticle">{{msg}}</h1-->
  </div>
</template>

<script>
export default {
  name: 'banner',
  data() {
    return {
      current: 0, // 当前索引
      timerId: null, // 清除循环标记
      intStyle: {},
      showBtn: false
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    height: {
      type: [String, Number],
      default: '100%'
    },
    width: {
      type: [String, Number],
      default: '100%'
    },
    background: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: ''
    },
    fontSize: {
      type: Number,
      default: 14
    },
  },
  methods: {
    getArticle () {
      this.$emit('getArticle', this.article)
    },
    // 鼠标移入状态圆点
    changeBanner (index) {
      this.$emit('change', this.current);
      this.stopLoop();
      this.current = index;
    },
    // 鼠标点击banner内容
    bannerClick (index, item) {
      this.$emit('click', index, item);
    },
    // 点击上一张按钮
    prev () {
      if(this.current > 0) {
        // 将对象列表对应的索引和整个对象传出去
        this.$emit('prev', this.current, this.list);
        this.current--;
      } else {
        this.$emit('prev', this.current, this.list);
        this.current = 3;
      }
    },
    // 点击下一张按钮
    next () {
      if(this.current < 3) {
        this.$emit('prev', this.current, this.list);
        this.current ++;
      } else {
        this.$emit('prev', this.current, this.list);
        this.current = 0;
      }
    },
    // 鼠标移出继续循环播放
    startLoop () {
      this.int(4000);
    },
    // 鼠标移入停止循环播放
    stopLoop () {
      clearTimeout(this.timerId); // 清除循环
    },
    // 初始化加载
    int (time){
      this.timerId = setInterval(()=> {
        this.next();
      }, time);
      // 初始化样式
      this.intStyle = {
        width: typeof(this.width) === 'string'? this.width : this.width + 'px',
        height: typeof(this.height) === 'string'? this.width : this.width + 'px',
        background: this.background,
        color: this.color,
        fontSize: this.fontSize
      }
    }
  },
  created () {
    this.int(4000);
  }
}
</script>

<style lang="scss" scoped>
.banner{
  width:100%;
  height:100%;
  overflow:hidden;
  .box{
    position:relative;
    height:100%;
    ul{
      height:100%;
      li{
        position:absolute;
        left:0;
        width:100%;
        height:100%;
        font-size:inherit;
        color:#fff;
        text-align:center;
        background:black;
        opacity:0;
        transition: all 1.5s;
        .banner-item-img {
          width: 100%;
          height: 100%;
        }
      }
      .active{
        opacity:1;
        transition: all 1.5s;
      }
    }
    .status{
      position:absolute;
      bottom:0;
      width:100%;
      height:40px;
      text-align:Center;
      span{
        display:inline-block;
        height:20px;
        width:20px;
        margin:0 5px;
        background: rgba(255,255,255, 0.5);
        border-radius:10px;
        color:#333;
        cursor:pointer;
      }
      span.active{
        color:#fff;
        background: rgba(0,0,0, 0.3);
      }
    }
  }
  .btn{
    position:absolute;
    top:50%;
    width:100%;
    transform: translateY(-50%);
    span{
      display:block;
      height:40px;
      width:30px;
      color:#fff;
      line-height:40px;
      text-align:Center;
      background:rgba(0,0,0, .7);
      cursor:pointer;
    }
    span.prev{
      float:left;
    }
    span.next{
      float:right;
    }
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>
